<template>
    <el-card :style="`height:${view.height - 140}px;`">
      <el-row class="filter-row" style="margin-bottom: 20px;" :gutter="20">
        <el-col :span="6">
          <el-select v-model="selectedModelType" placeholder="选择模型类型" @change="handleFilterChange" clearable>
            <el-option label="变化检测" value="变化检测"></el-option>
            <el-option label="目标检测" value="目标检测"></el-option>
            <el-option label="地物分类" value="地物分类"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input v-model="searchQuery" placeholder="搜索任务" @input="handleSearch" clearable></el-input>
        </el-col>
        <el-col :span="6" class="text-right">
          <el-button type="primary" @click="createTask">创建任务</el-button>
        </el-col>
      </el-row>
      <el-table  size="small" :data="filteredTasks" style="width: 100%" :border="true" :style="`height:${view.height - 300}px;margin:0 0 20px`">
        <el-table-column label="任务名称" width="100"   prop="name"></el-table-column>
        <el-table-column label="模型类型"  width="100" prop="modelType">
          <template #default="{ row }">
            <el-tag :type="getTagType(row.modelType)" disable-transitions>{{ row.modelType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="任务状态" prop="status"></el-table-column>
        <el-table-column label="训练数据集" prop="trainingDataset"></el-table-column>
        <el-table-column label="训练参数"  width="250" prop="trainingParams"></el-table-column>
        <el-table-column label="模型版本" prop="modelVersion"></el-table-column>
        <el-table-column label="训练时长" width="50"  prop="trainingDuration"></el-table-column>
        <el-table-column label="模型性能" prop="modelPerformance"></el-table-column>
        <el-table-column label="任务优先级"   prop="taskPriority"></el-table-column>
        <el-table-column label="模型状态" width="70"  prop="modelStatus"></el-table-column>
        <el-table-column label="进度" width="200" prop="progress">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" />
          </template>
        </el-table-column>
        <el-table-column label="操作"  width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small"  type="primary" plain @click="startTask(row)">开始</el-button>
            <el-button size="small"  type="warning" plain @click="endTask(row)">结束</el-button>
            <el-button size="small" type="danger" plain @click="deleteTask(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="filteredTasks.length > 0"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="filteredTasks.length"
        @current-change="handlePageChange"
        layout="total, prev, pager, next, jumper"
      ></el-pagination>
    </el-card>
  </template>
  
  <script setup>
  import { reactive, ref, computed } from 'vue';

  // Managing the window height
  const view = reactive({
    height: window.innerHeight,
  });

  // Initialize tasks with 10 tasks for each model type
  const tasks = ref([
    ...Array(3).fill(null).map((_, index) => ({
      id: index + 1,
      name: `变化检测任务 ${index + 1}`,
      modelType: '变化检测',
      status: '待处理',
      createTime: new Date().toLocaleString(),
      startTime: '',
      endTime: '',
      creator: '张三',
      trainingDataset: `数据集 ${index + 1}`,
      trainingParams: 'batch size: 32, learning rate: 0.01',
      modelVersion: 'v1.0',
      trainingDuration: '',
      modelPerformance: '准确率: 85%',
      taskPriority: '高',
      modelStatus: '未训练',
      progress: 0,
    })),
    ...Array(4).fill(null).map((_, index) => ({
      id: index + 11,
      name: `目标检测任务 ${index + 1}`,
      modelType: '目标检测',
      status: '待处理',
      createTime: new Date().toLocaleString(),
      startTime: '',
      endTime: '',
      creator: '李四',
      trainingDataset: `数据集 ${index + 1}`,
      trainingParams: 'batch size: 64, learning rate: 0.005',
      modelVersion: 'v2.0',
      trainingDuration: '2小时',
      modelPerformance: '准确率: 90%',
      taskPriority: '中',
      modelStatus: '训练中',
      progress: 50,
    })),
    ...Array(3).fill(null).map((_, index) => ({
      id: index + 21,
      name: `地物分类任务 ${index + 1}`,
      modelType: '地物分类',
      status: '待处理',
      createTime: new Date().toLocaleString(),
      startTime: '',
      endTime: '',
      creator: '王五',
      trainingDataset: `数据集 ${index + 1}`,
      trainingParams: 'batch size: 128, learning rate: 0.002',
      modelVersion: 'v1.1',
      trainingDuration: '3小时',
      modelPerformance: '准确率: 95%',
      taskPriority: '低',
      modelStatus: '已训练',
      progress: 100,
    }))
  ]);

  // Filter and pagination state
  const selectedModelType = ref('');
  const searchQuery = ref('');
  const currentPage = ref(1);
  const pageSize = ref(30);

  // Computed filtered tasks
  const filteredTasks = computed(() => {
    let filtered = tasks.value;

    if (selectedModelType.value) {
      filtered = filtered.filter(task => task.modelType === selectedModelType.value);
    }

    if (searchQuery.value) {
      filtered = filtered.filter(task => task.name.includes(searchQuery.value));
    }

    const startIdx = (currentPage.value - 1) * pageSize.value;
    const endIdx = startIdx + pageSize.value;

    return filtered.slice(startIdx, endIdx);
  });

  // Handle filter change (model type)
  const handleFilterChange = () => {
    currentPage.value = 1; // Reset to first page when filter changes
  };

  // Handle search input
  const handleSearch = () => {
    currentPage.value = 1; // Reset to first page when search changes
  };

  // Handle page change
  const handlePageChange = (page) => {
    currentPage.value = page;
  };

  // Function to start a task
  const startTask = (task) => {
    task.status = '进行中';
    task.startTime = new Date().toLocaleString();
    task.progress = 0;
    let interval = setInterval(() => {
      task.progress += 10;
      if (task.progress >= 100) {
        clearInterval(interval);
        task.status = '已完成';
        task.endTime = new Date().toLocaleString();
      }
    }, 1000);
  };

  // Function to end a task
  const endTask = (task) => {
    task.status = '已结束';
    task.progress = 100;
    task.endTime = new Date().toLocaleString();
  };

  // Function to create a new task
  const createTask = () => {
    const newTask = {
      id: tasks.value.length + 1,
      name: `新任务 ${tasks.value.length + 1}`,
      modelType: '变化检测', // Default model type
      status: '待处理',
      createTime: new Date().toLocaleString(),
      startTime: '',
      endTime: '',
      creator: '用户',
      trainingDataset: '默认数据集',
      trainingParams: 'batch size: 32, learning rate: 0.01',
      modelVersion: 'v1.0',
      trainingDuration: '',
      modelPerformance: '待评估',
      taskPriority: '低',
      modelStatus: '未训练',
      progress: 0,
    };
    tasks.value.push(newTask);
  };

  // Function to delete a task
  const deleteTask = (task) => {
    tasks.value = tasks.value.filter(t => t.id !== task.id);
  };

  // Function to get tag color based on model type
  const getTagType = (modelType) => {
    switch (modelType) {
      case '变化检测':
        return 'success';
      case '目标检测':
        return 'warning';
      case '地物分类':
        return 'info';
      default:
        return 'primary';
    }
  };
</script>


  
<style lang="scss" scoped></style>
<style lang="scss"></style>
